<template>
  <div class="DpHeader">
    <div class="title">{{ title }}</div>
    <div class="txt">
      <div class="txt-left">{{ subtitle }}</div>
      <div class="txt-right" @click="edit(subtitle)">
        <FormOutlined :style="{ fontSize: '25px' }" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { FormOutlined } from '@ant-design/icons-vue'
import { inject, ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    required: true
  }
})

//点击打开抽屉
const edit = inject('editItem')
</script>
<style lang="scss" scoped>
.DpHeader {
  .title {
    font-size: 24px;
  }

  .txt {
    display: flex;
    margin: 5px 0;
    display: flex;
    align-items: center;

    .txt-right {
      margin-left: 8px;
    }
  }
  .radio {
    margin-left: 20px;
  }
}
</style>
